<template>
  <div>
    <div class="rightcontent" style="margin-right: 12px">
      <a-space>
        <span style="color: #000000d9">{{ store.userApp.userInfo.realName }}</span>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="menuClick">
              <!-- <a-menu-item key="1">
              <template #icon>
                <SettingOutlined />
              </template>
              <span>个人设置</span>
            </a-menu-item> -->
              <a-menu-item key="2">
                <template #icon>
                  <LogoutOutlined />
                </template>
                <span>返回门户</span>
              </a-menu-item>
            </a-menu>
          </template>
          <a-avatar shape="square" size="small">
            <template #icon>
              <UserOutlined />
            </template>
            {{ currentUser.nickname }}
          </a-avatar>
        </a-dropdown>
      </a-space>
      <div class="left">
        <div class="menu">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="$emit('update:collapsed', !collapsed)"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="$emit('update:collapsed', !collapsed)"
          />
        </div>
        <div class="title">专病管理中心</div>
      </div>
    </div>
    <a-drawer v-model:open="open" :width="300" placement="right" :closable="false">
      <div>
        <h3>主题风格</h3>
        <div>
          <div>
            <img
              src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg"
              alt="light"
            />
          </div>
          <div>
            <img
              src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg"
              alt="dark"
            />
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  BgColorsOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue'
import type { MenuProps } from 'ant-design-vue'
import { ref } from 'vue'
import store from '@/store'
import { useRouter } from 'vue-router'
const router = useRouter()

defineProps(['collapsed', 'currentUser'])
defineEmits(['update:collapsed'])

export type CurrentUser = {
  nickname: string
  avatar?: string
}

const open = ref(false)

const handleClick = () => {
  apply(randomTheme())
}

const menuClick: MenuProps['onClick'] = (e) => {
  const { key } = e
  if (key === '1') {
    // 主题设置
    open.value = true
  } else if (key === '2') {
    // 退出登录
    store.userStore.LoginOut()
    router.push({
      name: 'Login'
    })
  }
}
</script>

<style lang="less" scoped>
.rightcontent {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}
.left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.menu {
  height: 48px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-left: 8px;
}
.title {
  font-size: 16px;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 48px;
  height: 48px;
}
</style>
